import { Component, onMount, createSignal } from 'solid-js'
import { Colors, TranslatedKey } from '../../content'
// import Translator from '@sternelee/translator-worker'

const Page: Component = (props: any) => {
  console.log('page', props)
  const { cid = "1", pid = "latest", content = "" } = props
  let ref: any
  const [getTranslate, setTranslate] = createSignal(false)

  const onTranslate = () => {
    const willTranslate = !getTranslate()
    if (willTranslate) {
      (window as any).Translator.translatePage("zh")
    } else {
      (window as any).Translator.restorePage()
    }
    setTranslate(willTranslate)
    localStorage.setItem(TranslatedKey, willTranslate ? '1' : '0')
  }

  onMount(() => {
    ref.innerHTML = content
    const willTranslate = localStorage.getItem(TranslatedKey) === '1'
    if (willTranslate) {
      (window as any).Translator.translatePage("zh")
      setTranslate(true)
    }
  })

  const color = `#${Colors[Math.floor(Math.random()*Colors.length)]}`

  return (
    // <div innerHTML={content}></div>
    <>
      <div ref={ref}>
        {/* <span class='iconfont icon-loading' style={`font-size:60px;margin:30% auto 0;display:inline-block;color:${color};animation:rotate .6s infinite;`}></span> */}
        Loading
      </div>
      <div style={`position:fixed;top:36px;right:0;color:#fff;background:${color};display:flex;flex-direction:column;padding:10px;`}>
        <span class='iconfont icon-menu' style="font-size:20px;" onClick={() => history.go (-1)}></span>
        <span class='iconfont icon-zh' style="font-size:20px;margin-top:16px;" onClick={onTranslate}></span>
      </div>
    </>
  )
}

export { Page }
